<template>
  <div class="user-list">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <div class="search-item">
        <div class="search-label">用户名</div>
        <el-input v-model="searchName" placeholder="请输入用户名" class="search-input" />
      </div>

      <div class="search-item">
        <div class="search-label">账号</div>
        <el-input v-model="searchKeyword" placeholder="请输入账号" class="search-input" />
      </div>

      <div class="search-item">
        <div class="search-label">手机号</div>
        <el-input v-model="searchPhone" placeholder="请输入手机号" class="search-input" />
      </div>

      <div class="search-item">
        <div class="search-label">用户性别</div>
        <el-select v-model="searchStatus" placeholder="请选择性别" style="width: 200px">
          <el-option label="男" value="male" />
          <el-option label="女" value="female" />
        </el-select>
      </div>

      <el-button type="primary" @click="searchUsers" class="search-button">搜索</el-button>
      <el-button @click="resetSearch" class="search-button">重置</el-button>
    </div>

    <!-- 工具栏 -->
    <div class="button-group">
      <el-button type="primary" class="custom-button" @click="openAddDialog">新增</el-button>
      <el-button type="danger" class="custom-button" @click="deleteUsers">批量删除</el-button>
      <el-button type="warning" class="custom-button" @click="exportSelectedToExcel"
        >导出</el-button
      >
      <el-button type="info" class="custom-button" @click="triggerImport">导入</el-button>
    </div>

    <!-- 用户表格 -->
    <el-table
      :data="paginatedUsers"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
      row-key="id"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column prop="index" label="编号" width="120" align="center" />
      <el-table-column prop="account" label="账号" align="center" />
      <el-table-column prop="name" label="用户名" align="center" />
      <el-table-column prop="phone" label="手机号" align="center" />
      <el-table-column prop="sex" label="性别" align="center" />

      <!-- 头像列 -->
      <el-table-column prop="avatar" label="头像" align="center">
        <template #default="{ row }">
          <el-image
            :src="row.avatar"
            alt="头像"
            style="width: 40px; height: 40px; border-radius: 50%"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center">
        <template #default="{ row }">
          <el-button type="primary" size="small" class="operation-button" @click="editUser(row)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" class="operation-button" @click="deleteUser(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="custom-pagination">
      <span>共 {{ filteredUsers.length }} 条</span>
      <select v-model="pageSize" @change="handleSizeChange" class="page-size-select">
        <option v-for="size in [10, 20, 30, 50]" :key="size" :value="size">{{ size }}条/页</option>
      </select>
      <button
        :disabled="currentPage === 1"
        @click="changePage(currentPage - 1)"
        class="pagination-button"
      >
        &lt;
      </button>
      <!-- 动态生成页码按钮 -->
      <button
        v-for="page in totalPages"
        :key="page"
        :class="['pagination-button', { 'current-page': page === currentPage }]"
        @click="changePage(page)"
      >
        {{ page }}
      </button>
      <button
        :disabled="currentPage === totalPages"
        @click="changePage(currentPage + 1)"
        class="pagination-button"
      >
        &gt;
      </button>
      <span>前往</span>
      <input
        type="number"
        v-model.number="jumpPage"
        @keyup.enter="jumpToPage"
        class="pagination-input"
        :max="totalPages"
        :min="1"
      />
      <span>页</span>
    </div>

    <!-- 新增用户对话框 -->
    <el-dialog
      title="新增用户"
      v-model="addDialogVisible"
      width="45vw"
      top="25vh"
      @close="handleDialogClose"
      class="custom-dialog"
    >
      <el-form
        :model="addForm"
        :rules="rules"
        ref="addForm"
        label-width="100px"
        class="custom-form"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="addForm.username" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password" placeholder="请输入密码" type="password" />
        </el-form-item>
        <el-form-item label="姓名" prop="truename">
          <el-input v-model="addForm.truename" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="addForm.sex" placeholder="请选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model="addForm.tel" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="角色" prop="roleNames">
          <el-checkbox-group v-model="addForm.roleNames">
            <el-checkbox label="学生">学生</el-checkbox>
            <el-checkbox label="教师">教师</el-checkbox>
            <el-checkbox label="教务">教务</el-checkbox>
            <el-checkbox label="系统管理员">系统管理员</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <div class="button-container">
            <el-button type="primary" @click="submitAddForm" class="submit-button">确定</el-button>
            <el-button @click="addDialogVisible = false" class="cancel-button">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑用户对话框 -->
    <el-dialog
      title="编辑用户"
      v-model="editDialogVisible"
      width="45vw"
      top="25vh"
      @close="handleEditDialogClose"
      class="custom-dialog"
    >
      <el-form
        :model="editForm"
        :rules="rules"
        ref="editForm"
        label-width="100px"
        class="custom-form"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="editForm.username" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editForm.password" placeholder="请输入密码" type="password" />
        </el-form-item>
        <el-form-item label="姓名" prop="truename">
          <el-input v-model="editForm.truename" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="editForm.sex" placeholder="请选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model="editForm.tel" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="角色" prop="roleNames">
          <el-checkbox-group v-model="editForm.roleNames">
            <el-checkbox label="学生">学生</el-checkbox>
            <el-checkbox label="教师">教师</el-checkbox>
            <el-checkbox label="教务">教务</el-checkbox>
            <el-checkbox label="系统管理员">系统管理员</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <div class="button-container">
            <el-button type="primary" @click="submitEditForm" class="submit-button">保存</el-button>
            <el-button @click="editDialogVisible = false" class="cancel-button">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <input
      ref="importInput"
      type="file"
      accept=".xlsx, .xls"
      style="display: none"
      @change="handleImportChange"
    />
  </div>
</template>

<script>
import {
  getUserList,
  deleteUser,
  saveUser,
  batchDeleteUsers,
  updateUser,
  importUsers,
  getUserDetail,
} from '@/api/user'
//导出文件
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'

export default {
  data() {
    return {
      selectedUsers: [], // 存储选中的用户
      addDialogVisible: false, // 控制新增弹窗的显示与隐藏
      editDialogVisible: false, // 控制编辑弹窗显示
      //用户表格
      addForm: {
        username: '',
        password: '',
        truename: '',
        sex: '',
        tel: '',
        roleNames: [], // 改为数组类型
      },
      //修改用户
      editForm: {
        id: '',
        username: '',
        password: '',
        truename: '',
        sex: '',
        tel: '',
        roleNames: [],
      },
      // 新增用户
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        truename: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        tel: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        roleNames: [
          { type: 'array', required: true, message: '请选择至少一个角色', trigger: 'change' },
        ],
      },
      searchName: '', // 用户名搜索条件
      searchKeyword: '',
      searchPhone: '',
      searchStatus: '',
      searchDepartment: '',
      users: [], // 用户列表
      pageSize: 10, // 每页显示条数
      currentPage: 1, // 当前页码
      jumpPage: 1, // 跳转页码
    }
  },
  computed: {
    //查询 男or女
    filteredUsers() {
      return this.users.filter((user) => {
        const keywordMatch = user.account.includes(this.searchKeyword)
        const phoneMatch = this.searchPhone ? user.phone.includes(this.searchPhone) : true
        const statusMatch = this.searchStatus
          ? user.sex === (this.searchStatus === 'male' ? '男' : '女')
          : true
        const departmentMatch = this.searchDepartment
          ? user.department === this.searchDepartment
          : true
        const nameMatch = this.searchName ? user.name.includes(this.searchName) : true
        return keywordMatch && phoneMatch && statusMatch && departmentMatch && nameMatch
      })
    },
    // 分页逻辑
    paginatedUsers() {
      // 分页逻辑
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.filteredUsers.slice(start, end)
    },
    // 计算总页数
    totalPages() {
      return Math.ceil(this.filteredUsers.length / this.pageSize)
    },
  },
  methods: {
    // 处理表格选择变化
    handleSelectionChange(selection) {
      this.selectedUsers = selection
    },
    // 处理每页条数变化
    handleSizeChange() {
      this.currentPage = 1 // 切换每页条数时重置到第一页
    },
    // 处理页码变化
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page
      }
    },
    // 跳转到指定页码
    jumpToPage() {
      if (this.jumpPage >= 1 && this.jumpPage <= this.totalPages) {
        this.currentPage = this.jumpPage
      } else {
        alert('请输入有效的页码')
      }
    },

    // 自增编号
    async fetchUsers() {
      try {
        const response = await getUserList()
        this.users = response.map((user, index) => ({
          ...user,
          index: index + 1,
        }))
      } catch (error) {
        console.error('获取用户列表失败:', error)
      }
    },

    // 搜索用户
    searchUsers() {
      this.currentPage = 1 // 搜索时重置到第一页
      console.log('搜索条件:', {
        account: this.searchKeyword,
        phone: this.searchPhone,
        status: this.searchStatus,
        department: this.searchDepartment,
        name: this.searchName,
      })
    },
    // 重置搜索条件
    resetSearch() {
      this.searchKeyword = ''
      this.searchPhone = ''
      this.searchStatus = ''
      this.searchDepartment = ''
      this.searchName = '' // 重置用户名搜索条件
      this.currentPage = 1 // 重置到第一页
      this.fetchUsers() // 重新获取用户列表
    },

    // 编辑用户
    async editUser(user) {
      // 获取用户详情（含密码）
      const detail = await getUserDetail(user.id)
      this.editForm = {
        userId: detail.userId,
        username: detail.username,
        password: detail.password, // 这里直接赋值后端返回的密码
        truename: detail.truename,
        sex: detail.sex,
        tel: detail.tel,
        roleNames: detail.roleNames || [],
      }
      this.editDialogVisible = true
    },

    //删除用户
    async deleteUser(user) {
      try {
        const confirm = await this.$confirm(`确定要删除用户 "${user.name}" 吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        if (confirm) {
          await deleteUser(user.id) // 调用 API 删除用户
          this.$message.success('用户删除成功')
          this.fetchUsers() // 刷新用户列表
        }
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除用户失败，请稍后重试')
        }
      }
    },

    // 批量删除用户
    async deleteUsers() {
      try {
        if (this.selectedUsers.length === 0) {
          this.$message.warning('请至少选择一位用户')
          return
        }

        const confirm = await this.$confirm(
          `确定要删除选中的 ${this.selectedUsers.length} 位用户吗？`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          },
        )

        if (confirm) {
          // 提取选中用户的ID数组
          const ids = this.selectedUsers.map((user) => user.id)
          await batchDeleteUsers(ids)
          this.$message.success('批量删除成功')
          this.fetchUsers() // 刷新列表
          this.selectedUsers = [] // 清空选中状态
        }
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('批量删除失败，请稍后重试')
        }
      }
    },

    openAddDialog() {
      this.resetAddForm() // 打开弹窗前重置表单
      this.addDialogVisible = true // 显示弹窗
    },
    // 重置新增用户表单
    resetAddForm() {
      this.addForm = {
        username: '',
        password: '',
        truename: '',
        sex: '',
        tel: '',
        roleNames: [],
      }
      if (this.$refs.addForm) {
        this.$refs.addForm.clearValidate() // 清除表单校验状态
      }
    },

    // 提交新增用户表单
    async submitAddForm() {
      try {
        // 校验表单
        this.$refs.addForm.validate(async (valid) => {
          if (valid) {
            // 调用 saveUser 接口提交新增用户数据
            const response = await saveUser(this.addForm)
            this.$message.success('新增用户成功') // 提示成功信息

            // 关闭弹窗
            this.addDialogVisible = false

            // 重置表单
            this.resetAddForm()

            // 刷新用户列表
            this.fetchUsers()
          } else {
            this.$message.error('请填写完整的表单信息')
          }
        })
      } catch (error) {
        this.$message.error('新增用户失败，请稍后重试') // 提示失败信息
        console.error('新增用户失败:', error)
      }
    },
    // 关闭新增对话框时重置表单
    handleDialogClose() {
      this.resetAddForm() // 重置表单
    },
    // 关闭编辑对话框时重置表单
    handleEditDialogClose() {
      // 可重置表单
      this.editForm = {
        id: '',
        username: '',
        password: '',
        truename: '',
        sex: '',
        tel: '',
        roleNames: [],
      }
      if (this.$refs.editForm) {
        this.$refs.editForm.clearValidate()
      }
    },

    // 提交编辑用户表单
    async submitEditForm() {
      try {
        this.$refs.editForm.validate(async (valid) => {
          if (valid) {
            await updateUser(this.editForm)
            this.$message.success('用户信息修改成功')
            this.editDialogVisible = false
            this.handleEditDialogClose()
            this.fetchUsers()
          } else {
            this.$message.error('请填写完整的表单信息')
          }
        })
      } catch (error) {
        this.$message.error('修改失败，请稍后重试')
      }
    },

    //导出文件
    exportTableToExcel() {
      // 1. 获取当前表格数据（分页后只导出当前页，全部数据用 this.filteredUsers）
      const data = this.paginatedUsers.map((user) => ({
        编号: user.index,
        账号: user.account,
        用户名: user.name,
        手机号: user.phone,
        性别: user.sex,
        部门: user.department,
        // 你可以根据需要添加更多字段
      }))

      // 2. 转换为 worksheet
      const worksheet = XLSX.utils.json_to_sheet(data)
      // 3. 创建 workbook
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, '用户列表')
      // 4. 导出
      const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
      saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '用户列表.xlsx')
    },
    //导出选中的文件
    exportSelectedToExcel() {
      if (this.selectedUsers.length === 0) {
        this.$message.warning('请先选择要导出的用户')
        return
      }
      // 只导出选中的用户
      const data = this.selectedUsers.map((user) => ({
        编号: user.index,
        账号: user.account,
        用户名: user.name,
        手机号: user.phone,
        性别: user.sex,
        部门: user.department,
        // 可根据需要添加更多字段
      }))

      // 生成 Excel
      const worksheet = XLSX.utils.json_to_sheet(data)
      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, '用户列表')
      const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
      saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '选中用户列表.xlsx')
    },
    // 处理文件导入
    handleImportChange(e) {
      const file = e.target.files[0]
      if (!file) return
      const reader = new FileReader()
      reader.onload = async (evt) => {
        const data = evt.target.result
        const workbook = XLSX.read(data, { type: 'binary' })
        const firstSheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[firstSheetName]
        const jsonData = XLSX.utils.sheet_to_json(worksheet)
        console.log('导入数据：', jsonData)
        // 调用后端接口上传数据
        try {
          const formData = new FormData()
          formData.append('file', file)
          await importUsers(formData)
          this.$message.success('导入成功')
          this.fetchUsers() // 刷新表格
        } catch (err) {
          this.$message.error('导入失败')
        }
      }
      reader(file)
    },
    // 触发文件导入
    triggerImport() {
      this.$refs.importInput.click()
    },
  },
  mounted() {
    this.resetAddForm() // 重置新增用户表单
    this.fetchUsers() // 页面加载时获取用户数据
  },
}
</script>

<style scoped>
/* 工具栏样式 */
.button-group {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
  margin-bottom: 20px; /* 工具栏与表格之间的间距 */
  flex-wrap: nowrap; /* 禁止按钮换行 */
}

/* 表格样式 */
.el-table {
  margin-top: 0; /* 确保表格顶部没有额外的间距 */
}

.el-table-column {
  white-space: nowrap; /* 禁止表格内容换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  overflow: hidden;
}

/* 自定义按钮样式 */
.custom-button {
  white-space: nowrap; /* 禁止按钮内的文本换行 */
  padding: 5px 10px; /* 调整按钮的内边距 */
  width: auto; /* 让按钮宽度根据内容自适应 */
  min-width: 80px; /* 设置按钮的最小宽度 */
  text-align: center; /* 居中文本 */
  border-radius: 4px; /* 圆角 */
}

/* 操作按钮样式 */
.operation-button {
  white-space: nowrap; /* 禁止按钮内的文本换行 */
  padding: 5px 10px; /* 调整按钮的内边距 */
  width: auto; /* 让按钮宽度根据内容自适应 */
  min-width: 60px; /* 设置按钮的最小宽度 */
  text-align: center; /* 居中文本 */
  border-radius: 4px; /* 圆角 */
  margin-right: 5px; /* 按钮之间的间距 */
}

/* 自定义分页样式 */
.custom-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 16px; /* 调整字体大小 */
}

.page-size-select {
  padding: 2px 6px; /* 调整下拉框内边距 */
  border: none; /* 移除边框 */
  outline: none; /* 秮除聚焦时的黑色边框 */
  border-radius: 4px;
  font-size: 14px; /* 调整字体大小 */
  background-color: #fff; /* 确保背景颜色一致 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 添加轻微阴影以增强视觉效果 */
}

.pagination-button {
  padding: 2px 6px; /* 减小按钮的内边距 */
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px; /* 调整字体大小 */
  min-width: 30px; /* 减小按钮的最小宽度 */
  text-align: center;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.pagination-button.current-page {
  background-color: #409eff;
  color: #fff;
  border-color: #409eff;
  font-weight: bold;
}

.pagination-button:disabled {
  cursor: not-allowed;
  background-color: #f5f5f5;
  color: #ccc;
}

.pagination-input {
  width: 40px; /* 调整输入框宽度 */
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px; /* 减小输入框内边距 */
  font-size: 14px; /* 调整字体大小 */
}

/* 头像样式 */
.el-image {
  object-fit: cover;
  border: 1px solid #ddd;
}
.user-list {
  padding: 20px;
  background-color: #f9f9f9;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 15px; /* 搜索项之间的间距 */
  flex-wrap: nowrap; /* 禁止换行 */
  margin-bottom: 20px; /* 搜索栏与其他内容之间的间距 */
}

.search-item {
  display: flex;
  align-items: center;
  gap: 5px; /* 标签与输入框之间的间距 */
}

.search-label {
  white-space: nowrap; /* 禁止换行 */
  font-size: 14px;
}

.search-input,
.search-select {
  width: 200px; /* 设置输入框和下拉框的固定宽度 */
}

.search-button {
  min-width: 80px; /* 设置按钮的最小宽度 */
  padding: 6px 10px; /* 调整按钮的内边距 */
}

.search-date-picker {
  width: 200px;
}

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.centered-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  font-size: 14px;
  min-width: 80px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

/* 强制覆盖默认样式 */
.el-pagination__sizes {
  display: none !important; /* 隐藏默认的 sizes */
}

.page-size-select {
  display: inline-block !important; /* 显示自定义的 sizes */
}

button {
  padding: 5px 10px; /* 调整按钮的内边距 */
  width: auto; /* 让按钮宽度根据内容自适应 */
  min-width: 80px; /* 设置按钮的最小宽度 */
  text-align: center; /* 居中文本 */
  border-radius: 4px; /* 圆角 */
}

.button-group {
  display: flex;
  gap: 10px; /* 设置按钮之间的间距 */
  justify-content: flex-start; /* 按钮靠左对齐 */
  align-items: center; /* 垂直居中 */
}

/* 弹窗表单输入框样式 */
.el-input {
  width: 300px; /* 设置弹窗输入框的固定宽度 */
  max-width: 100%; /* 确保在小屏幕下不会超出容器 */
}

/* 弹窗下拉框样式 */
.el-select {
  width: 300px; /* 设置弹窗下拉框的固定宽度 */
  max-width: 100%; /* 确保在小屏幕下不会超出容器 */
}

/* 弹窗复选框组样式 */
.el-checkbox-group {
  display: flex;
  flex-wrap: wrap; /* 允许复选框换行 */
  gap: 10px; /* 设置复选框之间的间距 */
}

/* 自定义弹窗样式 */
.custom-dialog {
  background: #f0f9ff; /* 设置背景颜色 */
  border-radius: 10px; /* 圆角 */
  padding: 20px;
}

/* 表单样式 */
.custom-form {
  width: 100%; /* 表单宽度 */
  max-width: 500px; /* 最大宽度 */
  margin: 0 auto; /* 居中 */
}

/* 输入框样式 */
.el-input,
.el-select {
  width: 100%; /* 输入框宽度 */
  border-radius: 5px; /* 圆角 */
}

/* 按钮容器样式 */
.button-container {
  display: flex;
  justify-content: center; /* 按钮水平居中 */
  gap: 20px; /* 按钮之间的间距 */
  margin-top: 20px; /* 按钮与表单内容的间距 */
}

/* 按钮样式 */
.submit-button {
  background: linear-gradient(to right, #4facfe, #00f2fe); /* 渐变背景 */
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 40px; /* 调整按钮内边距，增加宽度 */
  font-size: 16px; /* 调整字体大小 */
}

.cancel-button {
  background: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 5px;
  padding: 10px 40px; /* 调整按钮内边距，增加宽度 */
  font-size: 16px; /* 调整字体大小 */
}

/* 隐藏必填字段的红色星号 */
.el-form-item__label .is-required::before {
  content: none !important; /* 移除红点 */
}
</style>
